<template>
  <section class="v-swiper" :style="{ 'margin-top': top, 'margin-left': margins, 'margin-right': margins}">
    <template v-if="list">
      <section ref="swiperinner" class="v-swiper-inner">
        <div class="swiper-wrapper" :style="{'height': height}">
          <div v-for="(item, index) in list" :key="index" class="swiper-slide" :class="{'radius': radius}">
            <van-image :style="{'height': height}" :src="item.icon" />
          </div>
        </div>
        <div v-show="indicators" class="swiper-pagination" />

        <section v-show="button">
          <div class="swiper-button-prev" />
          <div class="swiper-button-next" />
        </section>
      </section>
    </template>
    <template v-else>
      <van-skeleton title :row="3" />
    </template>
  </section>
</template>
<script>
import Swiper from 'swiper'
import 'swiper/swiper-bundle.css'
import mixins from './../mixins'
export default {
  name: 'VSwiper',
  mixins: [mixins],
  props: {
    option: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      swiper: null
    }
  },
  computed: {
    vertical() {
      return this.option.vertical
    },
    indicators() {
      return this.option.indicators
    },
    indicatorscolor() {
      return this.option.indicatorscolor
    },
    button() {
      return this.option.button
    },
    width() {
      return this.px2rem(this.option.width || 750)
    },
    height() {
      return this.px2rem(this.option.height || 350)
    },
    radius() {
      return this.option.radius || 1
    },
    list() {
      return this.option.list
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.init()
    })
  },
  methods: {
    init() {
      this.swiper = new Swiper(this.$refs.swiperinner, {
        pagination: '.swiper-pagination',
        prevButton: '.swiper-button-prev',
        nextButton: '.swiper-button-next',
        loop: true,
        loopAdditionalSlides: 1,
        autoplayDisableOnInteraction: false,
        autoplay: 2000,
        centeredSlides: true,
        slidesPerView: '1',
        observer: true,
        observeParents: true
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/styles/utility/rem.scss';
.v-swiper {
  .v-swiper-inner {
    max-width: rem(710);
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    &::-webkit-scrollbar {
      width: 0;
      height: 0;
    }
    text-align: center;
    .swiper-wrapper {
      width: 100%;
      height: 100%;
      .swiper-slide {
        width: 100%;
        height: 100%;
        .van-image {
          width: 100%;
          height: 100%;
        }
        &.radius {
          border-radius: rem(4);
          .van-image {
            border-radius: rem(4);
          }
        }
      }
    }
    .swiper-button-prev,
    .swiper-button-next {
      width: rem(47);
      height: rem(64);
      background-size: rem(47) rem(64);
      margin-top: auto;
      transform: translateY(-50%);
    }

    .swiper-button-prev {
      left: rem(20);
    }

    .swiper-button-next {
      right: rem(20);
    }
  }
}
</style>
